import "./clubDetails.less";
import React from "react";
import classnames from "classnames";
import { NavLink } from "react-router-dom";
import { connect } from "react-redux";
import GameConfig from "../../reducers/gameconfig";
import JoinInClub from './JoinInClub'

const mapStateToProps = state => {
  return {
    gameData: state.app.gameData,
    userInfo: state.app.userInfo,
    isAgent: state.app.isAgent
  };
};
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    openCreateGame: gameData =>
      dispatch(global.allActions.appActions.openCreateGame(gameData)),
      openModal: msg => dispatch(global.allActions.appActions.openModal(msg))
  };
};

class ClubDetails extends React.Component<any, any> {
  public constructor(props) {
    super(props);
    this.state = {
      showDialog: false,
      myClubsList: [],
      gameType: 0,
      jumpUrl: ''
    };
  }

  public componentDidMount() {
    var str = navigator.userAgent.toLowerCase();
    var ver = str.match(/iphone/gi);
    if (ver) {
      this.setState({
        iOSVersion: true,
      });
    }

    this.getMyClubs();

// 跳转后打开对话框
    // let typeCode = sessionStorage.getItem("clubType");
    // let to = queryString.parse(window.location.href).to;
    // let type = queryString.parse(window.location.href).type;
    // if (to && typeCode !== "create") {
    //   if (type.match("create")) {
    //     sessionStorage.setItem("clubType", "create");
    //     setTimeout(()=>{
    //       this.setState({
    //         showDialog: true
    //       });
    //     }, 100);
    //   }
    // }
  }

  private onOpenCreateClub() {

    if(!this.props.isAgent) {
      return this.props.openModal('您还不是代理，无法创建俱乐部');
    }
    window.location.hash = '#/Club';
    // this.setState({
    //   showDialog: true
    // });
  }

  private close() {
    this.setState({
      showDialog: false
    });
  }

  public getMyClubs() {
    const params = {
      limit: 20,
      offset: 0
      // uid: this.props.userInfo.uid
    };
    const query = queryString.stringify(params);
    const url = `${config.pre}/crowd/conf/${Cookies.get(
      "areaCode"
    )}/joinedConfs`;
    const opt = { method: "GET" };
    fetchJson(url, opt).then(data => {
      console.log("getMyClubs", data);
      this.setState({
        myClubsList: data.data.confList,
        jumpUrl: data.data.jumpUrl
      });
    });
  }

  private onJoinInClub() {
    this.setState({ showJoinRule: true })
  }

  private gotoClub(club) {    
    console.log(club);
    const params = {
      limit: 100,
      offset: 0
    };
    const query = queryString.stringify(params);
    const url = `${config.pre}/crowd/conf/${Cookies.get(
      "areaCode"
    )}/set/${club.id}`;
    const opt = { method: "GET" };
    fetchJson(url, opt).then(data => {
      console.log("gotoClub", data);
      if(data.result == 0) {
        window.location.href = this.state.jumpUrl;
      } else {
        this.props.openModal(data.message);
        this.getMyClubs();
      }
  });

  }

  render() {
    let { showDialog, myClubsList , showJoinRule} = this.state;
    return ( 
      <div className="club-container">
        <div className="pure-g">
          <div
            className="pure-u-1-2 club-action-btn"
            onClick={this.onOpenCreateClub.bind(this)}
          >
            <img src="img/club/create-club.png?v=20181201" alt="" className="club-action-img"/>
          </div>
          <div className="pure-u-1-2 club-action-btn"
          onClick={this.onJoinInClub.bind(this)}>
            <img src="img/club/join-club.png?v=20181201" alt="" className="club-action-img"/>
          </div>
        </div>

        <div className="my-clubs-container">
          <div className="my-club-title" />
          <ul className="my-club-list">
            {myClubsList.map(item => {
              let jsonContent = item.jsonContent;
              let json;
              let str;
              if (jsonContent != "") {
                json = JSON.parse(jsonContent);
                let gameType = item.gameType;
                let gameName = GameConfig[gameType].name;
                str = gameName + " ";
                Object.keys(json).forEach(item => {
                  if (GameConfig[gameType]) {
                    let cf = GameConfig[gameType][item];
                    if (cf && cf[json[item]]) {
                      str += `${cf[json[item]]} `;
                    }
                  }
                });
              } else {
                str = "暂无玩法";
              }

              return (
                <li className="pure-g club-list-item" onClick={this.gotoClub.bind(this, item)}>
                  <div className="pure-u-1-6">
                    <img src={item.headUrl} alt="" className="club-headurl" />
                  </div>
                  <div className="pure-u-7-12 pure-g">
                    <div className="pure-u-1-1 color-orange text-left">会长:{item.nickname}</div>
                    <div className="pure-u-1-1 color-orange text-left">{item.confName}</div>
                  </div>
                  {/* <div className="pure-u-5-12">
                    <div className="pure-u-1-1 color-orange align-left"></div>
                    <div className="pure-u-1-1 color-orange method-str align-left">{str}</div>
                  </div> */}
                  <div className="pure-u-1-4 color-black club-conf-id justify-center align-start pure-g">
                    <span>ID: {item.id}</span>
                  </div>
                </li>
              );
            })}
          </ul>
        </div>
        <div className="usercenter-bottom">
          <img className="bar" src="img/app/kuang-bottom.png?v=20181201" alt="" />
          <div className="text">
            <img src="img/club/club-bottom-title.png" alt="" className="club-bottom-title"/>
          </div>
          <NavLink to="/App">
            <img className="back" src="img/app/back.png?v=20181201" alt="" />
          </NavLink>
        </div>
        
        {
        showJoinRule ? <JoinInClub close={() => this.setState({ showJoinRule: false })}></JoinInClub> : null
      }
      </div>
    );
  }
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ClubDetails);
